﻿{% extends 'base.html' %}
{% load staticfiles %}
{% load oa_tags %}
{% block hander %}
    <link rel="stylesheet" href="{% static 'css/base.css'%}" />
    <script src="{% static 'js/jquery.validate.min.js'%}"></script>

{% endblock hander %}
{% block main %}
				<div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">

						<ul class="breadcrumb">
							<li>
								<i class="icon-home home-icon"></i>
								<a href="#">首页</a>
							</li>

							<li>
								<a href="#">SpiffWorkflow请假</a>
							</li>
						</ul><!-- .breadcrumb -->

						<div class="nav-search" id="nav-search">
							<form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
									<i class="icon-search nav-search-icon"></i>
								</span>
							</form>
						</div><!-- #nav-search -->
					</div>

					<div class="page-content">
						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-xs-12">
										<h3 class="header smaller lighter blue">请假申请
                                            <a href="javascript:void(0);" role="button" id='btn-new-leave' class="btn btn-purple btn-sm" data-toggle="modal"> 新申请 </a>
                                        </h3>
										<div class="table-header">
											我的请假申请
										</div>

										<div class="table-responsive">
											<table id="sample-table-2" class="table table-striped table-bordered table-hover">
												<thead>
													<tr>
                                                        <!--
														<th class="center">
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
															</label>
														</th>
														-->
														<th>姓名</th>
														<th>日期</th>
                                                        <th>部门</th>
                                                        <th>类别</th>
                                                        <th>原因</th>
                                                        <th>开始时间</th>
                                                        <th>结束时间</th>
                                                        <th>操作</th>

                                                        <!--
														<th class="hidden-480">Clicks</th>

														<th>
															<i class="icon-time bigger-110 hidden-480"></i>
															Update
														</th>
														<th class="hidden-480">Status</th>

														<th></th>
														-->
													</tr>
												</thead>
												<tbody>
												</tbody>
											</table>
										</div>
									</div>
								</div>
						    </div>
                        </div><!-- /.row -->
					</div><!-- /.page-content -->
				</div><!-- /.main-content -->
                <div id="modal-form" class="modal" tabindex="-1">
                        <div class="modal-dialog">
                            <form class="form-horizontal" id="form-new-leave" role="form"  >
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        <h4 class="blue bigger">请假</h4>
                                    </div>
                                    <div class="modal-body overflow-visible">
                                        <div class="col-xs-12">
                                            <input  id="id_id" name="id" type="text" style="display:none;">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label no-padding-right" for="req_name"> 申请人 </label>

                                                <div class="col-sm-9">
                                                    <input type="text" id="id_req_name" name="req_name" placeholder="申请人" class="col-xs-10 col-sm-5" />
                                                </div>
                                            </div>

                                            <div class="space-4"></div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 申请时间 </label>

                                                <div class="input-group col-sm-4">
                                                    <input class="form-control date-picker" id="id_req_date_0" name="req_date_0" data-date-format="yyyy-mm-dd" type="text">
                                                    <span class="input-group-addon">
                                                        <i class="icon-calendar bigger-110"></i>
                                                    </span>
                                                </div>
                                                <div class="input-group col-sm-4  bootstrap-timepicker">
                                                    <input id="id_req_date_1" name="req_date_1" type="text" class="form-control time-picker" />
                                                    <span class="input-group-addon">
                                                        <i class="icon-time bigger-110"></i>
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="space-4"></div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 部门 </label>

                                                <div class="col-sm-9">
                                                    <input type="text" id="id_depart_name" name="depart_name" placeholder="部门" class="col-xs-10 col-sm-5" />
                                                </div>
                                            </div>

                                            <div class="space-4"></div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 请假类别 </label>
                                                <div class="col-sm-9">
                                                    <select class="form-control " id="id_req_class" name="req_class_id">
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="space-4"></div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 开始时间 </label>

                                                <div class="input-group col-sm-4">
                                                    <input class="form-control date-picker" id="id_start_time_0" name="start_time_0" data-date-format="yyyy-mm-dd" type="text">
                                                    <span class="input-group-addon">
                                                        <i class="icon-calendar bigger-110"></i>
                                                    </span>
                                                </div>
                                                <div class="input-group col-sm-4  bootstrap-timepicker">
                                                    <input id="id_start_time_1" name="start_time_1" type="text" class="form-control time-picker" />
                                                    <span class="input-group-addon">
                                                        <i class="icon-time bigger-110"></i>
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="space-4"></div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 结束时间 </label>

                                                <div class="input-group col-sm-4">
                                                    <input class="form-control date-picker" id="id_end_time_0" name="end_time_0" data-date-format="yyyy-mm-dd" type="text">
                                                    <span class="input-group-addon">
                                                        <i class="icon-calendar bigger-110"></i>
                                                    </span>
                                                </div>
                                                <div class="input-group col-sm-4  bootstrap-timepicker">
                                                    <input id="id_end_time_1" name="end_time_1" type="text" class="form-control time-picker" />
                                                    <span class="input-group-addon">
                                                        <i class="icon-time bigger-110"></i>
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="space-4"></div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label no-padding-right" for="id_resion"> 原因 </label>
                                                <div class="col-sm-9">
                                                    <textarea class="form-control" id="id_resion" name="resion" placeholder="原因"></textarea>
                                                </div>

                                            </div>

                                            <div class="space-4"></div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label no-padding-right" for="id_audit_person"> 审批人 </label>
                                                <div class="col-sm-9">
                                                    <select class="form-control" id="id_audit_person" name="audit_person">
                                                        <option name="aa">aa</option>
                                                        <option name="bb">bb</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-sm" data-dismiss="modal">
                                            <i class="icon-remove"></i>
                                            取消
                                        </button>

                                        <button class="btn btn-sm btn-primary" id="btn-save">
                                            <i class="icon-ok"></i>
                                            保存
                                        </button>

                                        <button class="btn btn-sm btn-success" id="btn-save-submit">
                                            <i class="icon-ok"></i>
                                            保存并提交
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

		<script src="{% static 'js/jquery.dataTables.min.js'%}"></script>
		<script src="{% static 'js/jquery.dataTables.bootstrap.js'%}"></script>
        <script src="{% static 'js/bootbox.min.js'%}"></script>

        <script type="text/javascript">

            var ajaxHelper = new AjaxHelper();

            function fillSelect(){
                $.getJSON("/oa/leave/audit_person_json",{ajax: 'true'}, function(j){
                        var options = '';
                        for (var i = 0; i < j.length; i++) {
                        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                        }
                        $("select#id_audit_person").html(options);

                });
                $.getJSON("/oa/leave/req_class_list_json",{ ajax: 'true'}, function(j){
                    var options = '';
                    for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                    }
                    $("select#id_req_class").html(options);

                });
            }
            function fillForm(pk){
                ajaxHelper.get('/oa/leave/lookup/'+pk,null, function(result){

                    $('#modal-form :input').not(':button, :submit, :reset').val('').removeAttr('checked').removeAttr('selected');
                    fillSelect();
                    //info = result.data[0].fields;
                    var info = JSON.parse(result.leave)
                    console.info(info);
                    Object.keys(info).map(function(key){
                        console.info(key+" ->"+info[key])
                         $("[name=" + key + "]", $("#modal-form")).val(info[key]);

                    });


                });
            }

            $('.date-picker').datepicker({autoclose:true}).next().on(ace.click_event, function(){
                $(this).prev().focus();
            });

            $('#btn-new-leave').on('click', function() {
                $('#modal-form :input').not(':button, :submit, :reset').val('').removeAttr('checked').removeAttr('selected');
                fillSelect();
                $('#btn-save').show();
                $('#btn-save-submit').show();
                $('#modal-form').modal();

             });
            function toLookup(pk){
                console.info("lookUP->"+pk);
                fillForm(pk);
                $('#btn-save').hide();
                $('#btn-save-submit').hide();
                $('#modal-form').modal();

            }
            function toEdit(pk){
                console.info("toEdit->"+pk);
                fillForm(pk);
                $('#btn-save').show();
                $('#btn-save-submit').show();
                $('#modal-form').modal();

            }
            function toDel(pk){
                console.info("toDel->"+pk);
                bootbox.confirm("确定要删除吗?", function(result) {
                    if (result) {
                         callback = function(data) {
                                $('#sample-table-2').dataTable().fnDraw(false);
                         }
                         ajaxHelper.get('/oa/leave/del/'+pk,null,callback);
                    }
                })

            }

			jQuery(function($) {
			    var oTable1 = $('#sample-table-2').dataTable( {
                    "bFilter": false,
                    "processing": true,
                    "serverSide": true,
                    "ajax":"/oa/leave/post_list_json",
                     "columnDefs": [

                         {
                            "targets": [ 7 ],
                            "orderable": false,
                             "render": function ( data, type, row ) {
                                    //alert('data=>'+data+'\n type=>'+type+'\n row=>'+row);
                                 var out = '';
                                 out+='<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">';
                                 out+='<a class="blue"  href="javascript:void(0);" onclick=toLookup('+data+')><i class="icon-zoom-in bigger-130"></i></a>' ;
                                 out+='<a class="green" href="javascript:void(0);" onclick=toEdit('+data+')><i class="icon-pencil bigger-130"></i></a>';
                                 out+='<a class="red" href="javascript:void(0);" onclick=toDel('+data+')><i class="icon-trash bigger-130"></i></a>';
                                 out+='</div>';

                                 return out;
                                 },
                        }
                        ]
				} );

                $('#form-new-leave').validate({
                    errorElement: 'div',
                    errorClass: 'help-block',
                    focusInvalid: false,
                    rules: {
                        req_name: {
                            required: true,
                            maxlength: 5
                        },
                        depart_name:'required',
                        req_date_0:'required',
                        req_date_1:'required',
                        req_class_id:'required',
                        start_time_0:'required',
                        start_time_1:'required',
                        end_time_0:'required',
                        end_time_1:'required',
                        resion:'required',
                        audit_person:'required',
                    },
                    messages: {
                        req_name: {
                            required: "请输入申请人.",
                        },
                        depart_name: {
                            required: "请输入部门.",
                        },

                    },


                    highlight: function (e) {
                        $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                    },

                    success: function (e) {
                        $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                        $(e).remove();
                    },

                    errorPlacement: function (error, element) {
                        if(element.is(':checkbox') || element.is(':radio')) {
                            var controls = element.closest('div[class*="col-"]');
                            if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                            else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                        }

                        else error.insertAfter(element.parent());
                    },

                    submitHandler: function (form) {
                        $.ajax({
                            type: 'post',
                            url: '/oa/leave/save/',
                            datatype:'json',
                            data: $('#form-new-leave').serialize(),
                            success: function (data) {
                                //$(':input','#modal-form').not(':button, :submit, :reset').val('').removeAttr('checked').removeAttr('selected');
                                $('#modal-form').modal('hide');
                                $('#sample-table-2').dataTable().fnDraw(false);
                            }
                        })
                    },
                    invalidHandler: function (form) {
                    }

                });


				$('.time-picker').timepicker({
					minuteStep: 1,
					showSeconds: true,
					showMeridian: false
				}).next().on(ace.click_event, function(){
					$(this).prev().focus();
				});

				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});

				});

			})
		</script>
{% endblock main %}